<template>
  <view>
    <view style="height: 30rpx"></view>
    <view class="wap">
      <form>
        <view class="phone flex">
          <view class="flex">
            <view>*</view>
            <view class="flex-title">门店名称</view>
          </view>
          <view class="phone-input flex-j-center">
            <view class="phone-left">
              <input class="page-form-input" placeholder="请输入门店名称" v-model="name">
              </input>
            </view>
          </view>
        </view>
        <view class="phone flex">
          <view class="flex">
            <view>*</view>
            <view class="flex-title">门店地址</view>
          </view>
          <view class="phone-input flex-j-center">
            <view class="phone-left">
              <input class="page-form-input" placeholder="请输入门店地址" v-model="address">
              </input>
            </view>
          </view>
        </view>
        <view class="phone flex">
          <view class="flex">
            <view>*</view>
            <view class="flex-title">联系人</view>
          </view>
          <view class="phone-input flex-j-center">
            <view class="phone-left">
              <input class="page-form-input" placeholder="请输入联系人" value="" v-model="contacts">
              </input>
            </view>
          </view>
        </view>
        <view class="phone flex">
          <view class="flex">
            <view>*</view>
            <view class="flex-title">联系电话</view>
          </view>
          <view class="phone-input flex-j-center">
            <view class="phone-left">
              <input class="page-form-input" placeholder="请输入联系电话" type="digit" name="mobile" v-model="mobile"
                     maxlength="11">
              </input>
            </view>
          </view>
        </view>
        <view class="phone flex" style="border: none;">
          <view class="flex">
            <view>*</view>
            <view class="flex-title">备注</view>
          </view>
          <view class="phone-input flex-j-center">
            <view class="phone-left">
						<textarea class="page-form-inputs" style="width: 100%;" placeholder="请输入备注" v-model="remark">
						</textarea>
            </view>
          </view>
        </view>
        <view class="bottom" @click="apply()">提交</view>
      </form>
    </view>
  </view>

</template>

<script>
import {storeApply} from '../../apirequest/api.js';

export default {
  data() {
    return {
      //店铺名称
      name: '',
      //手机号
      mobile: '',
      contacts: '',
      remark: '',
      address: '',
      lock: 0,
    }
  },
  onShow() {

  },
  methods: {
    //提交申请
    apply: function () {
      if (!this.name) {
        uni.showToast({
          title: '请填写店铺名称',
          icon: "error"
        });
        return;
      }
      if (!this.address) {
        uni.showToast({
          title: '请填写店铺地址',
          icon: "error"
        });
        return;
      }
      if (!this.contacts) {
        uni.showToast({
          title: '请填写联系人',
          icon: "error"
        });
        return;
      }
      if (!this.mobile) {
        uni.showToast({
          title: '请填写联系电话',
          icon: "error"
        });
        return;
      }
      if (!this.remark) {
        uni.showToast({
          title: '请填写备注',
          icon: "error"
        });
        return;
      }
      if (this.lock) {
        return;
      }
      this.lock = 1;
      storeApply({
        mobile: this.mobile,
        name: this.name,
        contacts: this.contacts,
        remark: this.remark,
        address: this.address
      }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: '提交成功，请等待审核',
            icon: "success"
          })
          setTimeout(function () {
            uni.navigateBack({
              delta: 0
            });
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error"
          });
          this.lock = 0;

        }
      }).catch(err => {
        console.log(err)
      })

    },

  }
}
</script>

<style scoped lang="scss">
page {
  background: #f7f8f9;
}

.wap {
  width: 95%;
  margin: 0 auto;
  background-color: #FFFFFF;
  box-shadow: 0 0 20rpx -10rpx rgba(0, 0, 0, 0.2);
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx;
}

.wap .banner image {
  width: 100%;
  height: 144px
}

.wap .phone {
  padding: 19px 14px;
  border-bottom: 1px solid #e4e4e4
}

.wap .phone view:nth-child(2) {
  width: 72px;
  color: #333333;
  font-size: 30rpx;
  font-weight: bold;
  margin-right: 10rpx;
}

.wap .phone view:nth-child(1) {
  color: red;
  font-size: 30rpx;
  margin-right: 10rpx;
}

.wap .phone .phone-input {
  flex: 1
}

.wap .phone .phone-input .phone-left {
  flex: 1
}

.wap .phone .phone-input .phone-left .page-form-input {
  flex: 1;
  color: #333333;
  font-weight: normal;
}

.wap .phone .phone-input .phone-left .page-form-inputs {
  border: 1px solid #e4e4e4;
  border-radius: 10rpx;
  padding: 20rpx;
  color: #333333;
  font-weight: normal;
}

.wap .phone .phone-input .phone-right {
  color: #cccbd0
}

.wap .bottom {
  margin: 9px 14px;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  border-radius: 29px;
  background-image: linear-gradient(90deg, #ffae31, #fe7418)
}

.wap .image {
  margin: 24px 14px
}

.wap .image image {
  width: 100%;
  border-radius: 7px
}
</style>
